var WarnItem = function () {
  var template = /* template */ `
    <div class="warn-item" v-loading.fullscreen.lock="loading">
      <div class="table-title" v-if="warn!==null">
        <span>警报类型:</span>
        <span>{{warn.warnType}}</span>
      </div>
      <div class="warn-item-table-div">
        <el-table fit stripe border :data="warnList" style="width: 100%" height="parent" empty-text="暂无匹配警报数据" @selection-change="selectionChange">
          <el-table-column :resizable="false" type="selection" width="40px" align="center"></el-table-column>
          <el-table-column label="警报代码" prop="alarmCode" min-width="150px" align="center"></el-table-column>
          <el-table-column label="警报描述" prop="codeDescribe" min-width="150px" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.codeDescribe" size="mini" class="table-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="看板是否显示" prop="isShow" min-width="150px" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.isShow" size="mini" class="table-input">
                <el-option v-for="item in isShowList" :key="item.value" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deleteWarn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      warn: {
        type: Object,
        required: true
      },

      search: {
        type: Object,
        required: true
      }
    },

    watch: {
      changeData: function () {
        this.warnList = this.getWarnList();
      }
    },

    computed: {
      changeData: function () {
        var search = this.search;
        return `${search.alarmCode}_${search.codeDescribe}_${search.isShow}`;
      }
    },

    data: function () {
      return {
        loading: false,
        warnList: this.getWarnList(),
        selectWarnList: [],
        isShowList: i18n.getDropDown('machineRepair.warnSetting.isShow', [1, 2])
      };
    },

    methods: {
      getWarnList: function () {
        var warn = this.warn;
        if (warn === null) {
          return [];
        }

        var search = this.search;
        var fields = ['alarmCode', 'codeDescribe'];
        var warnList = warn.warnList;
        warnList = _.filter(warnList, function (warn) {
          for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var searchValue = search[field];
            if (searchValue === '') {
              continue;
            }
            searchValue = searchValue.toLowerCase();

            var value = warn[field];
            if (typeof value === 'number') {
              value = String(value);
            } else {
              value = value.toLowerCase();
            }
            if (value.indexOf(searchValue) === -1) {
              return false;
            }
          }

          var isShow = search.isShow;
          return isShow === '' ? true : warn.isShow === isShow;
        });
        warnList = _.orderBy(warnList, ['alarmCode'], ['asc']);
        warnList = _.cloneDeep(warnList);
        return warnList;
      },

      deleteWarn: function (warn) {
        var self = this;
        this.$confirm('是否确认删除该警报设置', '删除确认').then(function () {
          self.toDeleteWarn(warn);
        }).catch(function () {});
      },

      toDeleteWarn: function (warn) {
        var data = {
          typeName: warn.typeName,
          alarmCode: warn.alarmCode
        };

        this.loading = true;
        var self = this;
        ajaxRequest('equipment/deleteEquipmentAlarmCode', {
          jsonArray: JSON.stringify([data])
        }).then(function () {
          self.loading = false;
          self.$alert('警报设置删除成功', '信息', {
            callback: function () {
              var warnList = self.warnList;
              var index = warnList.indexOf(warn);
              if (index > -1) {
                warnList.splice(index, 1);
              }
              self.$emit('delete-success', warn);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      addWarn: function () {
        this.warnList = this.getWarnList();
      },

      selectionChange: function (warnList) {
        this.selectWarnList = warnList;
      },

      updateWarns: function () {
        var warnList = this.selectWarnList;
        if (warnList.length === 0) {
          this.$alert('请选择需要修改的数据', '信息');
          return Promise.resolve(false);
        }

        var warns = [];
        for (var i = 0; i < warnList.length; i++) {
          var warn = warnList[i];
          if (!this.checkValid(warn)) {
            return Promise.resolve(false);
          }
          warns.push({
            id: warn.id,
            codeDescribe: warn.codeDescribe,
            isShow: warn.isShow
          });
        }

        var self = this;
        return new Promise(function (resole, reject) {
          ajaxRequest('equipment/updateEquipmentAlarmCode', {
            jsonArray: JSON.stringify(warns)
          }).then(function () {
            self.$alert('批量修改警报成功', '信息', {
              callback: function () {
                resole(true);
              }
            });
          }).catch(function (error) {
            reject(error);
          });
        });
      },

      checkValid: function (warn) {
        var codeDescribe = warn.codeDescribe;
        if (codeDescribe === '') {
          this.$alert('请输入警报描述', '信息');
          return false;
        }
        return true;
      }
    },

    template: template
  };
}();
